import React, { Component } from 'react';
import { Table, Button, Space, Modal } from 'antd'
import { connect } from 'react-redux'
import { getDataList, deleteDataList } from '../../store/actions'
class Index extends Component {
	state = {
		columns: [{
			title: '昵称',
			dataIndex: 'nickname',
			key: 'nickname'
		}, {
			title: '创建时间',
			dataIndex: 'createAtTime',
			key: 'createAtTime'
		}, {
			title: '描述',
			dataIndex: 'desc',
			key: 'desc'
		}, {
			title: '操作',
			key: 'opration',
			render: (v) => {
				return <div>
					<Space>
						<Button type="primary">编辑</Button>
						<Button type="primary" danger onClick={() => this.handleDelete(v)}>删除</Button>
					</Space>
				</div>
			}
		}],
	}
	handleDelete(v) {
		Modal.confirm({
			title: '确认要删除吗？',
			okText: '确定',
			cancelText: '取消',
			onOk: () => {
				this.props.dispatch(deleteDataList(v.id))
			}
		})

	}
	componentDidMount() {
		this.props.dispatch(getDataList())
	}
	render() {
		const { dataList } = this.props
		const { columns } = this.state
 		return (
			<Table columns={columns} dataSource={dataList}>
				用户列表
			</Table>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
